<template>
	<view class="order-detail-container">
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>

		<!-- 顶部导航栏 -->
		<qmy-custom-navbar bacColor="0"></qmy-custom-navbar>

		<!-- 订单详情内容 -->
		<view class="order-content" v-if="orderInfo">
			<!-- 订单状态 -->
			<view class="status-card" :style="{paddingTop: menuObject.top + menuObject.height + 30 + 'px'}"
				:class="'status-' + orderInfo.status">
				<view class="status-content">
					<view class="status-left">
						<view class="status-header">
							<text class="status-text">{{getStatusText(orderInfo.status)}}</text>
							<text class="status-desc">{{getStatusDesc(orderInfo.status)}}</text>
						</view>
						<view class="delivery-info" @click="getExpressInfo" v-if="orderInfo.status >= 5">
							<view class="delivery-track">
								<view class="track-line">
									<view class="track-dot"></view>
									<view class="track-progress"></view>
								</view>
								<view class="track-content">
									<text class="delivery-company">{{orderInfo.express_company || '暂无物流信息'}}</text>
									<text class="delivery-number"
										v-if="orderInfo.express_no">实时状态：{{waybillStatus[waybillInfo.status] || '-'}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="status-right">
						<view class="status-icon">
							<text class="iconfont" :class="getStatusIcon"></text>
						</view>
					</view>
				</view>
				<view class="card-decoration">
					<view class="decoration-circle"></view>
					<view class="decoration-line"></view>
				</view>
			</view>

			<view class="ping-20">
				<!-- 收货地址 -->
				<view class="address-card" v-if="orderInfo.custom.address">
					<view class="address-icon">
						<text class="iconfont ic-dizhi"></text>
					</view>
					<view class="address-info">
						<view class="contact-info">
							<text class="name">{{orderInfo.custom.address.name}}</text>
							<text class="phone">{{orderInfo.custom.address.mobile}}</text>
						</view>
						<text
							class="address-detail">{{orderInfo.custom.address.formatted_address}}{{orderInfo.custom.address.address}}</text>
					</view>
					<view class="edit-btn" v-if="[0,1].includes(orderInfo.status)" @click="editAddress">
						<text>修改</text>
					</view>
				</view>

				<!-- 商品信息 -->
				<view class="goods-card">
					<view class="goods-item" @click="$NavigateTo(`/pages/detail/goodsDetail?id=${goods.goods_id}`)"
						v-for="(goods, index) in orderInfo.custom.goods_list" :key="index">
						<image class="goods-image" :src="goods.image" mode="aspectFill"></image>
						<view class="goods-detail">
							<text class="goods-name text-element-2">{{goods.name}}</text>
							<scroll-view scroll-x class="goods-service" v-if="goods.specs && goods.specs.length">
								<view class="service-tags-container">
									<text class="service-tag" v-for="(spec, idx) in goods.specs"
										:key="idx">{{spec}}</text>
								</view>
							</scroll-view>
							<view class="goods-price">
								<view>
									<text class="price-symbol">¥</text>
									<text class="price-value">{{(goods.price/100).toFixed(2)}}</text>
								</view>
								<text class="goods-quantity">x{{goods.quantity || 1}}</text>
							</view>
						</view>
					</view>
					<view class="price-summary">
						<view class="price-item">
							<text class="label">商品总价</text>
							<text class="value">¥{{(orderInfo.total_fee/100).toFixed(2)}}</text>
						</view>
						<view class="price-item">
							<text class="label">运费</text>
							<text
								class="value">{{orderInfo.custom.delivery_fee?'¥'+(orderInfo.custom.delivery_fee/100).toFixed(2):'包邮'}}</text>
						</view>
						<view class="total-price">
							<text class="label">实付款</text>
							<view class="value">
								<text class="symbol">¥</text>
								<text class="amount">{{(orderInfo.total_fee/100).toFixed(2)}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 订单信息 -->
				<view class="order-info-card">
					<view class="info-title">订单信息</view>
					<view class="info-item">
						<text class="label">订单编号</text>
						<view class="value-copy">
							<text>{{orderInfo.out_trade_no}}</text>
							<text class="copy-btn" @click="$copy(orderInfo.out_trade_no)">复制</text>
						</view>
					</view>
					<view v-if="orderInfo.express_no" class="info-item">
						<text class="label">快递单号</text>
						<view class="value-copy">
							<text>{{orderInfo.express_no}}</text>
							<text class="copy-btn" @click="$copy(orderInfo.express_no)">复制</text>
						</view>
					</view>
					<view v-if="orderInfo.express_company" class="info-item">
						<text class="label">快递公司</text>
						<text class="value">{{orderInfo.express_company}}</text>
					</view>
					<view class="info-item">
						<text class="label">创建时间</text>
						<text class="value">{{formatDate(orderInfo.create_date)}}</text>
					</view>
					<view class="info-item" v-if="orderInfo.pay_date">
						<text class="label">付款时间</text>
						<text class="value">{{formatDate(orderInfo.pay_date)}}</text>
					</view>
					<view class="info-item" v-if="orderInfo.delivery_date">
						<text class="label">发货时间</text>
						<text class="value">{{formatDate(orderInfo.delivery_date)}}</text>
					</view>
					<view class="info-item" v-if="orderInfo.finish_date">
						<text class="label">完成时间</text>
						<text class="value">{{formatDate(orderInfo.finish_date)}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-buttons" v-if="orderInfo && ![2,3,7].includes(orderInfo.status)">
			<!-- 已关闭状态 -->
			<template v-if="orderInfo.status === -1">
				<view class="btn btn-plain" @click="deleteOrder">删除订单</view>
			</template>
			<!-- 待付款状态 -->
			<template v-if="orderInfo.status === 0">
				<view class="btn btn-plain" @click="cancelOrder">取消订单</view>
				<view class="btn btn-primary" @click="payOrder">立即付款</view>
			</template>
			<!-- 待发货状态 -->
			<template v-if="orderInfo.status === 1">
				<view class="btn btn-plain" @click="applyRefund">申请退款</view>
				<view class="btn btn-primary" @click="remindShip">提醒发货</view>
			</template>
			<!-- 待收货状态 -->
			<template v-if="orderInfo.status === 5">
				<view class="btn btn-plain" @click="getExpressInfo">查看物流</view>
				<view class="btn btn-primary" @click="confirmReceive">确认收货</view>
			</template>
			<!-- 待评价状态 -->
			<template v-if="orderInfo.status === 6">
				<view class="btn btn-primary" @click="goEvaluate">评价晒单</view>
			</template>
			<!-- 退款中状态 -->
			<template v-if="orderInfo.status === 4">
				<view class="btn btn-plain" @click="viewRefundDetail">退款详情</view>
				<view class="btn btn-primary" @click="cancelRefund">取消退款</view>
			</template>
		</view>

		<!-- 确认收货弹窗 -->
		<uni-popup ref="receivePopup" type="dialog">
			<uni-popup-dialog type="warning" title="确认收货" content="确认已收到商品吗？" :before-close="true"
				@confirm="confirmReceiveOrder" @close="closeReceivePopup">
			</uni-popup-dialog>
		</uni-popup>

		<!-- 取消订单弹窗 -->
		<uni-popup ref="cancelPopup" type="dialog">
			<uni-popup-dialog type="warning" title="取消订单" content="确定要取消该订单吗？" :before-close="true"
				@confirm="confirmCancelOrder" @close="closeCancelPopup">
			</uni-popup-dialog>
		</uni-popup>

		<!-- 删除订单弹窗 -->
		<uni-popup ref="deletePopup" type="dialog">
			<uni-popup-dialog type="warning" title="删除订单" content="确定要删除该订单吗？" :before-close="true"
				@confirm="confirmDeleteOrder" @close="closeDeletePopup">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	// 引入微信物流插件
	// const plugin = requirePlugin("logisticsPlugin")
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				dataLoaded: false,
				orderId: '',
				orderInfo: null,
				waybillInfo: null, // 运单信息
				// 运单状态
				waybillStatus: {
					'0': '运单不存在或者未揽收',
					'1': '已揽件',
					'2': '运输中',
					'3': '派件中',
					'4': '已签收',
					'5': '异常',
					'6': '代签收',
				}
			}
		},
		computed: {
			getStatusIcon() {
				let status = this.orderInfo?.status || 0;
				const iconMap = {
					'-1': 'ic-shangjia',
					0: 'ic-daifukuan',
					1: 'ic-daifahuo',
					2: 'ic-kefuguanli',
					3: 'ic-kefuguanli',
					4: 'ic-kefuguanli',
					5: 'ic-daishouhuo',
					6: 'ic-yiwancheng',
					7: 'ic-huochepiao1'
				};
				return iconMap[status] || 'ic-yijiesuan';
			}
		},
		onLoad(options) {
			if (options.id) {
				this.orderId = options.id;
				this.loadOrderDetail();
			}
		},
		onUnload() {
			this.getOpenerEventChannel().emit('refreshData', '')
		},
		methods: {
			// 加载订单详情
			async loadOrderDetail() {
				this.$Route('get-private-data', !this.dataLoaded).getOrderDetail(this.orderId).then(res => {
					this.orderInfo = res.data[0];
					if (this.orderInfo.status == 5) {
						this.getExpressInfo();
					}
				}).catch(err => {
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login');
						}
					}, 1000);
				}).finally(() => {
					this.dataLoaded = true;
				});
			},
			// 获取物流信息
			async getExpressInfo(status) {
				this.$Route('get-private-data', !this.dataLoaded).getExpressInfo(this.orderId).then(res => {
					this.waybillInfo = res.data.waybill_info;
					if (!status) {
						// plugin.openWaybillTracking({
						// 	waybillToken: res.data.waybill_token
						// });
					}
				}).catch(err => {
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login');
						}
					}, 1000);
				}).finally(() => {
					this.dataLoaded = true;
				});
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'-1': '已关闭',
					'0': '待付款',
					'1': '待发货',
					'2': '已部分退款',
					'3': '已全额退款',
					'4': '退款中',
					'5': '待收货',
					'6': '待评价',
					'7': '已完成'
				};
				return statusMap[status] || '未知状态';
			},

			// 获取状态描述
			getStatusDesc(status) {
				const descMap = {
					'-1': '期待您的下次光临',
					'0': '请尽快完成付款',
					'1': '商家正在备货中',
					'4': '退款申请处理中',
					'5': '商品正在运输中',
					'6': '期待您的评价',
					'7': '交易已完成'
				};
				return descMap[status] || '';
			},

			// 格式化日期
			formatDate(timestamp) {
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
			},

			// 取消订单
			cancelOrder() {
				this.$refs.cancelPopup.open();
			},

			// 确认取消订单
			async confirmCancelOrder() {
				this.$Route('update-private-data').cancelOrder(this.orderId).then((res) => {
					this.$Toast(res.msg);
					setTimeout(() => {
						this.loadOrderDetail();
					}, 1000);
				}).catch(err => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				}).finally(() => {
					this.closeCancelPopup();
				});
			},

			// 关闭取消订单弹窗
			closeCancelPopup() {
				this.$refs.cancelPopup.close();
			},

			// 支付订单
			payOrder() {
				// 节流
				this.$debounce(() => {
					let options = {
						order_no: this.orderInfo.order_no,
						out_trade_no: this.orderInfo.out_trade_no,
						type: 'goods',
						description: `奇妙野商城订单-${this.orderInfo.out_trade_no}`,
						total_fee: this.orderInfo.total_fee,
					};
					let optionsStr = encodeURI(JSON.stringify(options));
					uni.navigateTo({
						url: `/pages/detail/pay-desk?options=${optionsStr}`,
						events: {
							refreshData: () => {
								this.loadOrderDetail();
							}
						}
					});
				}, 1000, true, "payOrder");
			},

			// 申请退款
			applyRefund() {
				uni.navigateTo({
					url: `/qmy_user/user/order/refund?id=${this.orderId}`,
					events: {
						refreshData: () => {
							this.loadOrderDetail();
						}
					}
				});
			},

			// 提醒发货
			async remindShip() {
				this.$Route('update-private-data').remindShip(this.orderId).then(res => {
					this.$Toast(res.msg);
				}).catch(err => {
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
						}
					}, 1000);
				});
			},

			// 确认收货
			confirmReceive() {
				this.$refs.receivePopup.open();
			},

			// 确认收货操作
			async confirmReceiveOrder() {
				this.$Route('update-private-data').confirmReceive(this.orderId).then(res => {
					this.$Toast(res.msg);
					setTimeout(() => {
						this.loadOrderDetail();
					}, 1000);
				}).catch(err => {
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login');
						}
					}, 1000);
				}).finally(() => {
					this.closeReceivePopup();
				});
			},

			// 关闭确认收货弹窗
			closeReceivePopup() {
				this.$refs.receivePopup.close();
			},

			// 删除订单
			deleteOrder() {
				this.$refs.deletePopup.open();
			},

			// 确认删除订单
			async confirmDeleteOrder() {
				this.$Route('update-private-data').deleteOrder(this.orderId).then(res => {
					this.$Toast(res.msg);
					setTimeout(() => {
						this.$NavigateBack();
					}, 1000);
				}).catch(err => {
					console.error('遇到错误:', err);
					this.closeDeletePopup();
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
					setTimeout(() => {
						if (code === 401) {
							this.$NavigateTo('/qmy_user/login');
						}
					}, 1000);
				})
			},

			// 关闭删除订单弹窗
			closeDeletePopup() {
				this.$refs.deletePopup.close();
			},

			// 去评价
			goEvaluate() {
				this.$NavigateTo(`/qmy_user/user/order/evaluate?id=${this.orderId}`);
			},

			// 查看退款详情
			viewRefundDetail() {
				this.$NavigateTo(`/qmy_user/user/order/refundDetail?id=${this.orderId}`);
			},

			// 取消退款
			async cancelRefund() {
				// 节流
				this.$debounce(() => {
					this.$Route('update-private-data').cancelRefund(this.orderId).then(res => {
						this.$Toast(res.msg);
						setTimeout(() => {
							this.loadOrderDetail();
						}, 1000);
					}).catch(err => {
						console.error('遇到错误:', err); // 打印错误信息
						let {
							code,
							msg
						} = this.$parseError(err); // 调用公共解析方法
						setTimeout(() => {
							if (code === 401) {
								this.$NavigateTo('/qmy_user/login'); // 跳转到登录页面
							}
						}, 1000);
						this.$Toast(msg);
					});
				}, 1000, true, "cancelRefund");
			},

			// 编辑地址
			editAddress() {
				uni.navigateTo({
					url: `/qmy_user/user/address/list?from=orderDetail`,
					events: {
						refreshData: (address) => {
							// 请求修改地址接口
							this.$Route('update-private-data').updateOrderAddress(this.orderId, address._id)
								.then(res => {
									this.$Toast(res.msg);
									setTimeout(() => {
										this.loadOrderDetail();
									}, 1000);
								}).catch(err => {
									console.error('遇到错误:', err);
									let {
										code,
										msg
									} = this.$parseError(err);
									this.$Toast(msg);
									setTimeout(() => {
										if (code === 401) {
											this.$NavigateTo('/qmy_user/login');
										}
									}, 1000);
								});
						}
					}
				});
			},


		}
	}
</script>

<style lang="scss">
	.order-detail-container {
		min-height: 100vh;
		background-color: #f7f7f7;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	}

	.order-content {}

	.status-card {
		position: relative;
		padding: 50rpx 40rpx;
		overflow: hidden;
		background: linear-gradient(135deg, #14cc60 0%, #0ab356 100%);
		box-shadow: 0 20rpx 40rpx rgba(20, 204, 96, 0.25);
		transform: translateZ(0);
		clip-path: ellipse(170% 100% at 50% 0%);

		// 不同状态不同配色
		&.status-0 {
			background: linear-gradient(135deg, #ff4f4f 0%, #ff3636 100%);
			box-shadow: 0 20rpx 40rpx rgba(255, 79, 79, 0.25);
		}

		&.status-1 {
			background: linear-gradient(135deg, #ffbc1e 0%, #ffa500 100%);
			box-shadow: 0 20rpx 40rpx rgba(255, 188, 30, 0.25);
		}

		&.status-4 {
			background: linear-gradient(135deg, #ff91ba 0%, #ff6b9c 100%);
			box-shadow: 0 20rpx 40rpx rgba(255, 145, 186, 0.25);
		}

		&.status-5 {
			background: linear-gradient(135deg, #14cc60 0%, #0ab356 100%);
			box-shadow: 0 20rpx 40rpx rgba(20, 204, 96, 0.25);
		}

		&.status-6 {
			background: linear-gradient(135deg, #5e9fff 0%, #3c85ff 100%);
			box-shadow: 0 20rpx 40rpx rgba(94, 159, 255, 0.25);
		}

		.status-content {
			position: relative;
			z-index: 2;
			display: flex;
			justify-content: space-between;
		}

		.status-left {
			flex: 1;
		}

		.status-header {
			margin-bottom: 30rpx;
		}

		.status-text {
			font-size: 52rpx;
			color: #ffffff;
			font-weight: 600;
			margin-bottom: 16rpx;
			display: block;
			letter-spacing: 2rpx;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		.status-desc {
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.9);
			display: block;
			letter-spacing: 1rpx;
		}

		.status-right {
			position: absolute;
			right: 0;
		}

		.status-icon {
			width: 120rpx;
			height: 120rpx;
			background: rgba(255, 255, 255, 0.15);
			backdrop-filter: blur(10px);
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: rotate(-10deg);
			box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
			animation: iconFloat 3s ease-in-out infinite;

			.iconfont {
				font-size: 60rpx;
				color: #ffffff;
			}
		}

		.delivery-track {
			margin-top: 40rpx;
			background: rgba(255, 255, 255, 0.15);
			backdrop-filter: blur(10px);
			border-radius: 25rpx;
			padding: 25rpx;
			display: flex;
			align-items: flex-start;
		}

		.track-line {
			position: relative;
			margin-right: 20rpx;
			padding-top: 8rpx;

			.track-dot {
				width: 20rpx;
				height: 20rpx;
				background: #ffffff;
				border-radius: 50%;
				position: relative;
				z-index: 2;
			}

			.track-progress {
				position: absolute;
				top: 28rpx;
				left: 9rpx;
				width: 2rpx;
				height: 40rpx;
				background: rgba(255, 255, 255, 0.3);

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: #ffffff;
					animation: progressGrow 1.5s ease-out infinite;
				}
			}
		}

		.track-content {
			flex: 1;

			.delivery-company {
				font-size: 28rpx;
				color: #ffffff;
				display: block;
				margin-bottom: 8rpx;
				font-weight: 500;
			}

			.delivery-number {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}

		.card-decoration {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			overflow: hidden;
			z-index: 1;

			.decoration-circle {
				position: absolute;
				right: -100rpx;
				top: -100rpx;
				width: 400rpx;
				height: 400rpx;
				border-radius: 50%;
				background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
				animation: rotate 20s linear infinite;
			}

			.decoration-line {
				position: absolute;
				left: -100rpx;
				bottom: -100rpx;
				width: 400rpx;
				height: 400rpx;
				background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
				transform: rotate(45deg);
				animation: shine 3s ease-in-out infinite;
			}
		}
	}

	@keyframes iconFloat {

		0%,
		100% {
			transform: rotate(-10deg) translateY(0);
		}

		50% {
			transform: rotate(-10deg) translateY(-10rpx);
		}
	}

	@keyframes progressGrow {
		0% {
			height: 0%;
		}

		100% {
			height: 100%;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes shine {

		0%,
		100% {
			opacity: 0.5;
		}

		50% {
			opacity: 0.8;
		}
	}

	.address-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		.address-icon {
			margin-right: 20rpx;

			.iconfont {
				font-size: 40rpx;
				color: #14cc60;
			}
		}

		.address-info {
			flex: 1;

			.contact-info {
				margin-bottom: 10rpx;

				.name {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
					margin-right: 20rpx;
				}

				.phone {
					font-size: 28rpx;
					color: #666;
				}
			}

			.address-detail {
				font-size: 28rpx;
				color: #333;
				line-height: 1.4;
			}
		}

		.edit-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
			border: 2rpx solid #14cc60;
			border-radius: 10rpx;
			height: 50rpx;
			width: 100rpx;

			text {
				font-size: 24rpx;
				color: #14cc60;
			}
		}
	}

	.goods-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;

		.goods-item {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}

			.goods-image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				background-color: #f5f5f5;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.goods-detail {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods-name {
					font-size: 28rpx;
					color: #333;
					line-height: 1.4;
				}

				.goods-service {
					width: 100%;

					.service-tags-container {
						display: inline-flex;
						padding: 4rpx 0;
					}

					.service-tag {
						font-size: 24rpx;
						color: #999;
						background-color: #f5f5f5;
						padding: 4rpx 10rpx;
						border-radius: 4rpx;
						margin-right: 10rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.goods-price {
					display: flex;
					align-items: baseline;
					justify-content: space-between;

					.price-symbol {
						font-size: 24rpx;
						color: #ff4f4f;
					}

					.price-value {
						font-size: 32rpx;
						color: #ff4f4f;
						font-weight: bold;
					}

					.goods-quantity {
						font-size: 26rpx;
						color: #999;
					}
				}
			}
		}

		.price-summary {
			padding-top: 20rpx;

			.price-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;

				.label {
					font-size: 26rpx;
					color: #666;
				}

				.value {
					font-size: 26rpx;
					color: #333;
				}
			}

			.total-price {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 2rpx solid #f5f5f5;

				.label {
					font-size: 28rpx;
					color: #333;
				}

				.value {
					.symbol {
						font-size: 24rpx;
						color: #ff4f4f;
					}

					.amount {
						font-size: 36rpx;
						color: #ff4f4f;
						font-weight: bold;
					}
				}
			}
		}
	}

	.order-info-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx;

		.info-title {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				font-size: 26rpx;
				color: #666;
			}

			.value {
				font-size: 26rpx;
				color: #333;
			}

			.value-copy {
				display: flex;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #333;
				}

				.copy-btn {
					margin-left: 20rpx;
					color: #14cc60;
					font-size: 24rpx;

					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}

	.bottom-buttons {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.btn {
			padding: 0 32rpx;
			height: 68rpx;
			line-height: 68rpx;
			border-radius: 10rpx;
			font-size: 26rpx;
			margin-left: 20rpx;

			&.btn-plain {
				border: 2rpx solid #ddd;
				color: #666;

				&:active {
					background-color: #f5f5f5;
				}
			}

			&.btn-primary {
				background-color: #14cc60;
				color: #fff;

				&:active {
					opacity: 0.8;
				}
			}
		}
	}

	.text-element-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>